<template>
  <view class="map_body">
    <view class="map_container" :style="mapHeightStyle">
      <map
        id="map"
        :key="mapKey"
        class="map_wrap"
        show-location
        :longitude="longitude"
        :latitude="latitude"
        :scale="scale"
        :markers="markers"
        :polyline="polyline"
        @click.native="handleClick"
      />
      <view class="footer_wrap" />
    </view>
  </view>
</template>
<script>
export default {
  props: {
    // 定位点
    location: {
      type: Object,
      default: () => ({ latitude: null, longitude: null })
    },
    // 地图高度
    height: {
      type: Number,
      default: 300
    },
    // markers 坐标集合
    markersPoints: {
      type: Array,
      default: () => []
    },
    // 连接线
    polyline: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      scale: 14,
      longitude: 114.579412,
      latitude: 37.023244,
      markers: [],
    }
  },
  computed: {
    // 地图最大高度样式
    mapHeightStyle() {
      return `height: ${this.height}rpx;`
    },
  },
  watch: {
    // 定位点（缩略图定位门店，预览大图定位当前位置）
    location: {
      handler(val) {
        const { latitude, longitude } = val ?? {}
        this.latitude = latitude
        this.longitude = longitude
      },
      deep: true,
      immediate: true
    },
    // markers - 坐标points集合
    markersPoints: {
      handler(points) {
        this.setMakers(points)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 设置markers
    setMakers(list) {
      this.markers = []
      this.markers.length = 0
      const markers = list.map((item, index) => ({
        id: index + 1,
        width: 20,
        height: 30,
        ...item
      }))
      this.markers = markers
    },
    // 地图点击事件（微信小程序特殊处理）
    handleClick() {
      this.$emit('clickMap')
    },
  }
}
</script>
<style lang="scss" scoped>
.map_container {
  width: 100%;
  position: relative;
}
.map_wrap {
  height: 100%;
  width: 100%;
}
// 遮盖水印
.footer_wrap {
  width: 100%;
  height: 60rpx;
  background:$uni-bg-color;
  position: absolute;
  bottom: 0;
}
</style>
